<template>
  <div id="user">
    <!-- 用户的封面 -->
    <div class="cover">
      <!-- 顶部导航栏 -->
      <div>
        <van-icon name="arrow-left" class="left" @click="onClickLeft"/>
        <div class="report" @click="changeClick"  v-if="this.users.name == this.userName">修改信息</div>
      </div>
      <!-- 用户的头像 昵称 -->
      <div class="img">
        <van-image
          round
          fit="cover"
          :src="users.img"
          class="image"
        />
      </div>
      <div class="name">
         {{users.name}}
         <!-- 用户的认证图标 -->
        <van-image v-if="users.student_identification" :src="require('../../assets/book.png')" class="identify" />
        <van-icon name="manager" v-if="users.people_identification" color="#00a8f3"/>
        <van-icon name="shop" v-if="users.shop_identification" color="#ff000a"/>
      </div>
      <!-- 用户的个性签名或者个人信息 -->
      <div class="signature">
        <van-icon name="edit" class="edit" />
        {{users.signature}}
      </div>
    </div>
    <!-- 用户的信息 -->
    <van-cell-group>
      <van-cell title="悬赏人昵称" :value="users.name" />
      <van-cell title="QQ" :value="users.qq_number" />
      <van-cell title="电话" :value="users.phone_number" />
      <van-cell title="信誉积分" :value="users.credit_score">
        <template #right-icon>
          <van-rate v-model="credit" readonly allow-half void-icon="star" void-color="#eee" />
        </template>
      </van-cell>
    </van-cell-group>
    <div class="identity">
      <van-button type="primary" round @click="identityClick" v-if="this.users.name == this.userName">前往信息身份认证</van-button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'User',
  data () {
    return {
      users: {},
      credit: null,
      userName:""
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1)
    },
    reportClick() {
      console.log("点击了举报按钮")
    },
    changeClick() {
      this.$router.push({path: '/change'})
    },
    // 点击进入身份信息认证
    identityClick() {
      this.$router.push({path: '/identity'})
    }
  },
  created(){
    this.userName=JSON.parse(window.localStorage.getItem('user')).name;
    if(this.$route.query.name==this.userName){
        this.axios({
        method: "get",
        url: this.$store.state.url+"/auth/user/info",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
       
        if(res.data.data.img){
        res.data.data.img = "http://picture.105577.xyz/"+res.data.data.img;
        }
        this.users = res.data.data;
        localStorage.user = JSON.stringify(this.users);
        this.$store.state.user =  res.data.data;
      })
    }
    if(this.$route.query.name&&this.$route.query.name!=this.userName){
          let params = new URLSearchParams();
          params.append('name',this.$route.query.name)
          this.axios({
          method: "get",
          url: this.$store.state.url+"/order/user/orderuser",
          headers:{
           'Authorization': localStorage.token
                },
          params
        }).then((res) => {
        this.users = res.data.data;
        if(res.data.data.img){
        this.users.img = "http://picture.105577.xyz/"+res.data.data.img;
        }
        this.credit =  this.users.credit_score/2
        if(res.data.data.code=="A0312"){
           Toast(res.data.data.message);
           setTimeout(this.$router.push("/identity"),1000)
        }
        })
    }else{
      this.userName=JSON.parse(window.localStorage.getItem('user')).name;
      this.axios({
        method: "get",
        url: this.$store.state.url+"/auth/user/info",
        headers:{
           'Authorization': localStorage.token
                }
      }).then((res) => {
        this.users = res.data.data;
        if(res.data.data.img){
        this.users.img = "http://picture.105577.xyz/"+res.data.data.img;
        }
        this.credit =  this.users.credit_score/2
      })
    }
  }
}
</script>

<style scoped>
  .navbar {
    color: #ffffff;
  }
  .cover {
    width: 100%;
    height: 240px
  }
  .left {
    font-size: 20px;
    color: #fff;
    padding: 5px;
    margin: 15px
  }
  .report {
    position: relative;
    right: 0;
    padding: 5px;
    margin: 14px;
    float: right;
    font-weight: 510;
    color: #fff;
  }
  .img {
    text-align: center;
    margin: 15px 0;
  }
  .image {
    width: 80px;
    height: 80px;
    border: 1px solid #cccccc
  }
  .identify {
    width: 18px;
    height: 18px
  }
  .name {
    text-align: center;
    font-weight: 900;
    line-height: 10px;
    color: rgb(255, 255, 255);
  }
  .signature {
    text-align: center;
    margin: 0 auto;
    padding: 15px;
    overflow: hidden;
    font-size: 13px;
    color: #fff;
  }
  .edit {
    font-size: 18px;
    vertical-align: text-bottom
  }
  .information {
    width: 100%;
    border-top: 5px solid #0026ff;
    background: rgb(255, 255, 255);
  }
  h4 {
    margin: 5px;
    color: #00a1ec;
  }
  .publish {
    border-bottom: 3px solid #0026ff;
    padding: 10px;
  }
  .accept {
    padding: 10px;
  }
  .identity {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
  }
</style>